<template>
  <div class="price-detail">
    <div class="header">
      <div class="left"></div>
      <div class="right">我收到的报价</div>
    </div>

    <div class="content">
      <PriceDetailCard :titleObj="titleObj"></PriceDetailCard>

      <el-card class="filter-card">
        <FilterCenter
          @btnClick="btnClick"
          :btnList="btnList"
          :isShowStatus="true"
        ></FilterCenter>

        <div>
          <i class="el-icon-s-tools setting-column" @click="setColumn"></i>
        </div>
        <Table
          :tableData="tableData"
          :tableColumn="tableColumn"
          :tableCellWidth="tableCellWidth"
          :tableCellAlign="tableCellAlign"
          :tableShowTooltip="tableShowTooltip"
          :tableEdit="tableEdit"
          :tableShowPagination="tableShowPagination"
          :paginationObj="paginationObj"
          :tableIsShowSerial="false"
          :tableIsShowCheckbox="true"
        >
          <template #handle="scope">
            <el-link type="primary" @click="clickOrder(scope.row)">
              议价
          </el-link>
          </template>
        </Table>
      </el-card>
    </div>

    <SetColumn
      :dialogVisible="dialogVisible"
      :columnList="columnList"
      @close="closeColumn"
      @refreshColumn="refreshColumn"
      @move="move"
    ></SetColumn>

    <DetailDrawer :drawer="drawer" @close="closeDrawer"></DetailDrawer>
  </div>
</template>

<script>
import PriceDetailCard from "../publishEnquiry/components/PriceDetailCard.vue";
import FilterCenter from "../publishEnquiry/components/FilterCenter.vue";
import Table from "@/components/ability-components/table.vue";
import SetColumn from "../publishEnquiry/components/SetColumn.vue";
import DetailDrawer from "./components/DetailDrawer.vue"
import { btnList, columnList } from "./data/btnData.js";
export default {
  components: {
    PriceDetailCard,
    FilterCenter,
    Table,
    DetailDrawer,
    SetColumn,
  },
  data() {
    return {
      btnList: btnList.filter((item) => item.type === 1),
      titleObj: {
        title: "我收到的报价",
        path: "/home/receiveQuotedPrice",
      },
      drawer:false,
      columnList: columnList,
      dialogVisible: false,
      paginationObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableShowPagination: true,
      tableEdit: {
        isShowEdit: false,
        align: "center",
      },
      tableShowTooltip: [],
      tableCellAlign: [
        {
          prop: "handle",
          align: "center",
        },
        {
          prop: "status",
          align: "center",
        },
        {
          prop: "remainTime",
          align: "center",
        },
        {
          prop: "model",
          align: "center",
        },
        {
          prop: "brand",
          align: "center",
        },
        {
          prop: "count",
          align: "center",
        },
        {
          prop: "price",
          align: "center",
        },
        {
          prop: "quotedPrice",
          align: "center",
        },
        {
          prop: "currency",
          align: "center",
        },
        {
          prop: "batch",
          align: "center",
        },
        {
          prop: "encapsulation",
          align: "center",
        },
        {
          prop: "deliveryDate",
          align: "center",
        },

        {
          prop: "address",
          align: "center",
        },
        {
          prop: "MPQ",
          align: "center",
        },
        {
          prop: "packing",
          align: "center",
        },
        {
          prop: "quotedDate",
          align: "center",
        },
        {
          prop: "remark",
          align: "center",
        },
      ],
      tableCellWidth: [
        {
          prop: "remainTime",
          width: "200",
        },
        {
          prop: "deliveryDate",
          width: "150",
        },
        {
          prop: "address",
          width: "200",
        },
        {
          prop: "price",
          width: "150",
        },
        {
          prop: "quotedPrice",
          width: "150",
        },
        {
          prop: "quotedDate",
          width: "150",
        },
      ],
      tableColumn: [
        {
          prop: "handle",
          label: "操作",
          slot:true,
        },
        {
          prop: "status",
          label: "状态",
        },
        {
          prop: "remainTime",
          label: "剩余确认时间",
        },
        {
          prop: "model",
          label: "型号",

        },
        {
          prop: "model",
          label: "品牌",
        },
        {
          prop: "count",
          label: "数量",
        },
        {
          prop: "batch",
          label: "批次",
        },
        {
          prop: "encapsulation",
          label: "封装",
        },
        {
          prop: "currency",
          label: "币种",
        },
        {
          prop: "price",
          label: "接受价",
        },
        {
          prop: "quotedPrice",
          label: "报价",
        },
        {
          prop: "deliveryDate",
          label: "交货期",
        },
        {
          prop: "address",
          label: "交货地",
        },
        {
          prop: "MPQ",
          label: "MPQ",
        },
        {
          prop: "packing",
          label: "包装",
        },
        {
          prop: "quotedDate",
          label: "报价日期",
        },
        {
          prop: "remark",
          label: "备注",
        },
      ],
      tableData: [
        {
          Key: "1",
          ID: "1",
          status: "待采纳",
          remainTime: "2020-01-01 00:00:00",
          model: "A100", //型号
          brand: "KEMET", //品牌
          count: "1000", //数量
          batch: "1", //批次
          encapsulation: "封装", //封装
          currency: "人民币", //币种
          price: "10.000000", //接受价
          quotedPrice: "12.000000",
          deliveryDate: "2022-11-11", //交货期
          address: "上海市普陀区金沙江路 1518 弄", //交货地
          MPQ: "MPQ", //MPQ
          packing: "包装", //包装
          quotedDate: "2022-11-11", //报价日期
          remark: "备注", //备注
        },
        {
          Key: "2",
          ID: "2",
          status: "待采纳",
          remainTime: "2020-01-01 00:00:00",
          model: "A100", //型号
          brand: "KEMET", //品牌
          count: "1000", //数量
          batch: "1", //批次
          encapsulation: "封装", //封装
          currency: "人民币", //币种
          price: "10.000000", //接受价
          quotedPrice: "12.000000",
          deliveryDate: "2022-11-11", //交货期
          address: "上海市普陀区金沙江路 1518 弄", //交货地
          MPQ: "MPQ", //MPQ
          packing: "包装", //包装
          quotedDate: "2022-11-11", //报价日期
          remark: "备注", //备注
        },
        {
          Key: "3",
          ID: "3",
          status: "待采纳",
          remainTime: "2020-01-01 00:00:00",
          model: "A100", //型号
          brand: "KEMET", //品牌
          count: "1000", //数量
          batch: "1", //批次
          encapsulation: "封装", //封装
          currency: "人民币", //币种
          price: "10.000000", //接受价
          quotedPrice: "12.000000",
          deliveryDate: "2022-11-11", //交货期
          address: "上海市普陀区金沙江路 1518 弄", //交货地
          MPQ: "MPQ", //MPQ
          packing: "包装", //包装
          quotedDate: "2022-11-11", //报价日期
          remark: "备注", //备注
        },
        {
          Key: "4",
          ID: "4",
          status: "待采纳",
          remainTime: "2020-01-01 00:00:00",
          model: "A100", //型号
          brand: "KEMET", //品牌
          count: "1000", //数量
          batch: "1", //批次
          encapsulation: "封装", //封装
          currency: "人民币", //币种
          price: "10.000000", //接受价
          quotedPrice: "12.000000",
          deliveryDate: "2022-11-11", //交货期
          address: "上海市普陀区金沙江路 1518 弄", //交货地
          MPQ: "MPQ", //MPQ
          packing: "包装", //包装
          quotedDate: "2022-11-11", //报价日期
          remark: "备注", //备注
        },
        {
          Key: "5",
          ID: "5",
          status: "待采纳",
          remainTime: "2020-01-01 00:00:00",
          model: "A100", //型号
          brand: "KEMET", //品牌
          count: "1000", //数量
          batch: "1", //批次
          encapsulation: "封装", //封装
          currency: "人民币", //币种
          price: "10.000000", //接受价
          quotedPrice: "12.000000",
          deliveryDate: "2022-11-11", //交货期
          address: "上海市普陀区金沙江路 1518 弄", //交货地
          MPQ: "MPQ", //MPQ
          packing: "包装", //包装
          quotedDate: "2022-11-11", //报价日期
          remark: "备注", //备注
        },
      ],
    };
  },
  methods: {
    closeDrawer(){
       this.drawer=false;
    },
    clickOrder(row){
        this.drawer=true;
    },
    move(type, index) {
      if (type == 1) {
        this.sortUp(index);
      } else {
        this.sortDown(index);
      }
    },
    sortUp(index) {
      const temp = this.columnList[index - 1];
      this.$set(this.columnList, index - 1, this.columnList[index]);
      this.$set(this.columnList, index, temp);
    },
    sortDown(index) {
      const temp = this.columnList[index + 1];
      this.$set(this.columnList, index + 1, this.columnList[index]);
      this.$set(this.columnList, index, temp);
    },
    refreshColumn() {
      this.tableColumn = this.columnList
        .filter((item) => item.isShow)
        .map((item) => {
          return { prop: item.prop, label: item.label };
        });
      this.dialogVisible = false;
      console.log(this.tableColumn, "tableColumn===============");
    },
    closeColumn() {
      this.dialogVisible = false;
    },
    setColumn() {
      console.log("setColumn");
      this.dialogVisible = true;
    },
    again() {
      console.log("again");
    },
    btnClick(item) {
      this[item.fuc]();
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.price-detail {
  position: relative;
  .header {
    display: flex;
    margin-bottom: 20px;
    .left {
      background-color: #442a8d;
      width: 5px;
      height: 20px;
      margin-right: 5px;
    }
    .right {
      font-weight: 650;
      color: #666666;
      font-size: 16px;
    }
  }
  .filter-card {
    margin-top: 20px;
  }

  .setting-column {
    position: absolute;
    top: 350px;
    right: 19px;
    z-index: 999;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
